<template>
  <div>
    <headers>
      <div class="top" slot="detail">
        <router-link active-class="active" tag="li" to="/detail/11/shangpin">商品</router-link>
        <router-link active-class="active" tag="li" to="/detail/11/xiangqing">详情</router-link>
        <router-link active-class="active" tag="li" to="/detail/11/pingjia">评价</router-link>
      </div>
    </headers>

    <router-view :datail="datalist"></router-view>
  </div>
</template>
<script>
import headers from "@/components/Headers";
import Vue from "vue";
import { Sku } from "vant";
import http from "../../util/http";
Vue.use(Sku);
export default {
   data() {
    return {
      datalist:{}
    };
  },
  components: {
    headers,
  },
 async mounted() {
   await this.getDetail()
   
  },
  methods:{
    getDetail(){
       http.get("goods").then((res) => {
      this.datalist=res.data.goods_list[0]
      console.log(res.data.goods_list[0], "222",);

      //         this.items.push(...res.data.datalist);
    });
    }
  }
 
};
</script>
<style lang="scss" scoped>
li {
  list-style: none;
  float: left;
  margin: 0 2rem;
}
.active {
  border-bottom: 1px solid #f5503a;
}
</style>